import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Users } from '../api/users/users.js';

import {List, ListItem} from 'material-ui/List';
import ActionGrade from 'material-ui/svg-icons/action/grade';
import Divider from 'material-ui/Divider';
import Avatar from 'material-ui/Avatar';
import {pinkA200, transparent} from 'material-ui/styles/colors';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Tab2Detail from './Tab2Detail.jsx';


const styles = {
  toolbar:{
    position: 'fixed',
    top: 0,
    width: '100%',
  },
  footer:{
    position: 'fixed',
    bottom: 0,
    width: '100%',
  },
}

export  class Tab2 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false,
      uid:null
    };
  }
componentDidMount(x,y,z){
 this.setState({cw:window.innerWidth});
}  

handleClose(){
  this.setState({open:false});
}

renderItems() {
  return this.props.items.map((item) => (
      <ListItem
        key = {item.userId}
        onTouchTap={e => 
          this.setState({open:true, uid:item.userId})
        }
        primaryText={item.title}
        secondaryText={'['+item.userId+']'+item.desc}
        rightAvatar={<Avatar src={item.avatar} />}
      />

  ));
}


 render() {
    return (
    <div>
    <List>
       {this.renderItems()}
    </List>
   <Drawer width={this.state.open?this.state.cw:0} openSecondary={true} open={this.state.open} >
          <Tab2Detail
            uid={this.state.uid}
            handleClose={this.handleClose.bind(this)}
          />
     </Drawer>

    </div>
   );
  }  
}


Tab2.propTypes = {
  items: PropTypes.array.isRequired,
};

export default createContainer((props) => {
  Meteor.subscribe('users_fp');
  let query = {"utype":"用户"};

  if(props.searchText){
    let rtx = ".*" + props.searchText + ".*";
    //匹配titleFrom,titleTo,title 三个字段
    //query={$or:[{"title": {$regex: rtx}},{"userId": {$regex: rtx}}]}
    query={
            $and: 
            [
              {$or:[{"title": {$regex: rtx}},{"userId": {$regex: rtx}}]},
              {"utype":"用户"} 
            ]
          }
  }  
  return {
    items: Users.find(query, { sort: { createdAt: -1 } }).fetch(),
  };
}, Tab2);